<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>忧郁小王子-文章详情页</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/home/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="/home/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="/home/css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="/home/css/style.min.css" rel="stylesheet">
  <style>
      .card-text{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
      }
  </style>
</head>

<body class="grey lighten-3">

<!--Main Navigation-->
<header>

  <!-- Navbar -->
  {{include '../common/home_header.html'}}
  <!-- Navbar -->

</header>
  <!--Main Navigation-->

  <!--Main layout-->
  <main class="mt-5 pt-5">
    <div class="container">

      <!--Section: Post-->
      <section class="mt-4">

        <!--Grid row-->
        <div class="row">

          <!--Grid column-->
          <div class="col-md-8 mb-4">

            <!--Featured Image-->
            <div class="card mb-4 wow fadeIn">

              <img style="height: 300px" src="{{article.cover}}" class="img-fluid" alt="">

            </div>
            <!--/.Featured Image-->

            <!--Card-->
            <div class="card mb-4 wow fadeIn">

              <!--Card content-->
              <div class="card-body text-center">

                <p class="h3 my-4">{{article.title}}</p>

                <div class="container" style="border: 1px red solid;margin-top: -15px">
                  <span>作者:{{article.author.username}}</span>
                  &nbsp;|&nbsp;
                  <span>发布时间:{{dateFormat(article.publishDate,'yyyy-mm-dd HH:mm:ss')}}&nbsp;</span>
                  <span>阅读:{{article.readCount}}&nbsp;</span>
                  <span>评论:0</span>
                </div>
                <hr>
                <p>
                  {{article.content.replace(/<[^>]+>/g,'')}}
                </p>
                <hr>

                <a class="btn btn-outline-primary" href="#" role="button">
                  点赞
                  <i class="fas  fa-thumbs-up ml-2"></i>
                </a>
                <div class="container">此文章所属分类:&nbsp;<a href="javascript:;">{{article.classify.title}}</a></div>
              </div>

            </div>
            <!--/.Card-->

            <!--Card-->
            <div class="card mb-4 wow fadeIn">

              <!--Card content-->

            </div>
            <!--/.Card-->

            <!--Card-->
            <div class="card mb-4 wow fadeIn">

              <div class="card-header font-weight-bold">
                <span>关于作者</span>
              </div>
              <!--Card content-->
              <div class="card-body">
                <div class="media d-block d-md-flex mt-3">
                  <img class="d-flex mb-3 mx-auto z-depth-1" src="{{article.author.profilePhoto}}"
                    alt="Generic placeholder image" style="width: 100px;">
                  <div class="media-body text-center text-md-left ml-md-3 ml-0">
                    <h5 class="mt-0 font-weight-bold">
                      {{article.author.username}}
                    </h5>
                   个人简介: <br>
                    {{article.author.introduce}}
                  </div>
                </div>
              </div>

            </div>
            <!--/.Card-->

            <!--Comments-->

            <!--/.Comments-->

            <!--Reply-->
            <div class="card mb-3 wow fadeIn">
              <div class="card-header font-weight-bold">评论此文章</div>
              <div class="card-body">

                <!-- Default form reply -->
                <!--判断用户是否登录，登录才能评论-->
                {{if userInfo != null}}
                <form method="post" action="/home/comment">

                  <!-- Comment -->
                  <div class="form-group">
                    <input type="hidden" name="uid" value="{{@userInfo._id}}">
                  </div>
                  <div class="form-group">
                    <input type="hidden" name="aid" value="{{@article._id}}">
                  </div>
                  <div class="form-group">
                    <label for="replyFormComment">输入评论内容</label>
                    <textarea name="content" class="form-control" id="replyFormComment" rows="3"></textarea>
                  </div>
                  <div class="text-center mt-4">
                    <button onclick="return check()" class="btn btn-info btn-md" type="submit">发布评论</button>
                  </div>
                </form>
                {{else}}
                <h4 style="text-align: center;color: red"><a style="color: red" href="/toLoginPage">请先登录</a>,就可以评论此文章啦！！！</h4>
                {{/if}}

                <!-- Default form reply -->



              </div>
            </div>
            <!--/.Reply-->
            <div class="card card-comments mb-3 wow fadeIn">
              <div class="card-header font-weight-bold">评论列表</div>
              <div class="card-body">
                {{each comment}}
                <div class="media d-block d-md-flex mt-4">
                  <img class="d-flex mb-3 mx-auto " src="{{$value.uid.profilePhoto}}">
                  <div class="media-body text-center text-md-left ml-md-3 ml-0">
                    <h5 class="mt-0 font-weight-bold">
                      {{$value.uid.username}}
                      &nbsp;&nbsp;
                      <span style="color: green;font-size: 16px">{{dateFormat($value.time,'yyyy-mm-dd HH:mm:ss')}}</span>
                    </h5>
                    {{$value.content}}
                    <!-- Quick Reply -->
                  </div>
                </div>
                {{/each}}
              </div>
            </div>
          </div>
          <!--Grid column-->

          <!--Grid column-->
          <div class="col-md-4 mb-4">

            <!--Card: Jumbotron-->
            <div class="card blue-gradient mb-4 wow fadeIn">

              <!-- Content -->
              {{if userInfo}}
              <div class="card-body text-white text-center">

                <h4 class="mb-4">
                  <strong>点击下方链接即可发布文章！ </strong>
                </h4>
                {{if userInfo.role == '管理员'}}
                <a href="/admin/toAddArticle" class="btn btn-outline-white btn-md">
                  发布文章<i class="fas fa-plus-square ml-2"></i>
                </a>
                {{else}}
                <a href="#" class="btn btn-outline-white btn-md">
                  你还不是管理员，升级吧！
                  <i class="fas fa-graduation-cap ml-2"></i>
                </a>
                {{/if}}
              </div>
              {{else}}
              <div class="card-body text-white text-center">

                <h4 class="mb-4">
                  <strong>如果你也想发布文章，注册即可发布文章！ </strong>
                </h4>

                <a href="/toLoginPage" class="btn btn-outline-white btn-md">
                  <i class="fas fa-user ml-2"></i>
                  登录
                  &nbsp;/<i class="fas fa-address-book ml-2"></i>
                  注册
                </a>

              </div>
              {{/if}}
              <!-- Content -->
            </div>
            <!--Card: Jumbotron-->

            <!--Card : Dynamic content wrapper-->
            <div class="card mb-4 text-center wow fadeIn">

              <div class="card-header">
                如果你有什么更好的建议或者网站存在什么问题，欢迎给我留言！！！
              </div>
              <!--Card content-->
              <div class="card-body">
                <!-- Default form login -->
                {{if userInfo}}
                <form action="#">
                  <!-- Default input email -->
                  <input type="hidden" id="uid" name="uid" value="{{@userInfo._id}}">
                  <label for="defaultFormEmailEx" class="grey-text">请输入你的留言内容</label>
                  <textarea id="content" name="content" class="form-control" id="defaultFormEmailEx" rows="3"></textarea>
                  <br>
                  <div class="text-center mt-4">
                    <button onclick="checkMessage()" class="btn btn-info btn-md" type="button">留言</button>
                  </div>
                  <p id="message" style="color: red;"></p>
                </form>
                {{else}}
                <h4 style="text-align: center;color: red"><a style="color: red" href="/toLoginPage">请先登录</a>,就可以给我留言啦！！！</h4>
                {{/if}}
                <!-- Default form login -->
              </div>
            </div>
            <!--/.Card : Dynamic content wrapper-->
            <!--Card-->
            <div class="card mb-4 wow fadeIn">

              <div class="card-header">热门文章</div>

              <!--Card content-->
              <div class="card-body">

                <ul class="list-unstyled">
                  {{each hotArticle}}
                  <li class="media my-4">
                    <img style="width: 70px;height: 70px" class="d-flex mr-3" src="{{$value.cover}}" alt="Generic placeholder image">
                    <div class="media-body">
                      <a href="/home/article_details?id={{@$value._id}}">
                        <h5 class="mt-0 mb-1 font-weight-bold">{{$value.title}}</h5>
                      </a>
                      <p class="card-text">
                        {{@$value.content.replace(/<[^>]+>/g,'')}}
                      </p>
                    </div>
                  </li>
                  {{/each}}
                </ul>

              </div>

            </div>
            <!--/.Card-->

          </div>
          <!--Grid column-->

        </div>
        <!--Grid row-->

      </section>
      <!--Section: Post-->

    </div>
  </main>
  <!--Main layout-->

  <!--Footer-->
  <footer class="page-footer text-center font-small mdb-color darken-2 mt-4 wow fadeIn">

    <!--Call to action-->
    <div class="pt-4">
      <a class="btn btn-outline-white" href="#" role="button">关于我
        <i class="fa  fa-user-secret ml-2"></i>
      </a>
      <a class="btn btn-outline-white" href="#" role="button">
        联系我
        <i class="fa  fa-envelope-square ml-2"></i>
      </a>
    </div>
    <!--/.Call to action-->

    <hr class="my-4">



    <!--Copyright-->
    <div class="footer-copyright py-3">
      <a href="#">Copyright &copy; 2021 www.xiaowangzi.clib All rights reserved.</a>
      <br>
      <a href="#">黔ICP备xxxxxxxx-1号</a>
    </div>
    <!--/.Copyright-->

  </footer>

  <!-- SCRIPTS -->
  <!-- JQuery -->
  <script type="text/javascript" src="/home/js/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="/home/js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="/home/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="/home/js/mdb.min.js"></script>
  <!-- Initializations -->
  <script type="text/javascript">
    // Animations initialization
    new WOW().init();
    function check(){
      let comment = $('#replyFormComment').val();
      if(comment == ''){
        alert('评论内容不能为空！！！');
        return false;
      }
      else{
        return true;
      }
    }
    function checkMessage(){
      let content = document.getElementById('content');
      let uid = $('#uid').val();
      let message = document.getElementById('message');
      if(content.value == ''){
        alert('留言内容不能为空！！！');
      }
      else{
        $.ajax({
          type: 'post',
          url: '/home/message',
          data: {
            uid: uid,
            content: content.value
          },
          success: function (data){
            message.innerHTML = data.message;
            content.value = '';
          }
        })
      }
    }
  </script>
</body>

</html>
